<template>
  <el-container id="platformPermissions">
    <el-header id="elheader" :height="headerHeight" style="margin:0px;padding:10px 0px 0px 0px">
      <el-button v-if="btnPermission.save.buttonCaption" type="primary" @click="handelSave">
        {{ btnPermission.save.buttonCaption }}
      </el-button>
      <el-button v-if="btnPermission.delete.buttonCaption" type="danger" @click="handelDelete">
        {{ btnPermission.delete.buttonCaption }}</el-button>
    </el-header>
    <el-container>
      <el-aside width="240px" style="margin:0px;padding:0px">
        <div :style="{height:mainHeight+'px'}" class="asideTable">
          <div class="roleTable roleHeader">所有角色</div>
          <div v-for="(item) in outTableData" :key="item.id" class="roleTable roleList"
            :class="{active:item.id==roleList.id}" @click="handelOutTableRowClick(item)">{{ item.roleName }}</div>
        </div>
      </el-aside>
      <el-main style="margin:0px 10px 0px 10px;padding:0px">
        <el-container style="margin:0px;padding:0px">
          <el-main style="margin:0px 10px 0px;padding:0px">
            <el-table ref="innerTable" :height="mainHeight" :data="inTableData" style="width: 99.9%" row-key="id">
              <el-table-column prop="permissions" label="权限">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.permissions.sctgbd"> 生产>生产进度 </el-checkbox>
                  <el-checkbox v-model="scope.row.permissions.sckgbd"> 生产>生产工时填报 </el-checkbox>
                  <el-checkbox v-model="scope.row.permissions.scwgbd"> 生产>生产工时审批 </el-checkbox>
                  
                  <!--
                  <el-checkbox v-model="scope.row.permissions.sctgbd"> 生产>停工报单 </el-checkbox>
                  <el-checkbox v-model="scope.row.permissions.scycbd"> 生产>异常报单 </el-checkbox>
                  <el-checkbox v-model="scope.row.permissions.scjsjd"> 生产>项目进度-技术 </el-checkbox>
                  <el-checkbox v-model="scope.row.permissions.sccgjd"> 生产>项目进度-采购 </el-checkbox>
                  -->
                  <!-- <el-checkbox v-model="scope.row.permissions.ckrkjl"> 仓库>入库记录 </el-checkbox> -->
                  <el-checkbox v-model="scope.row.permissions.ckqtrk"> 仓库>其他入库 </el-checkbox>
                  <!-- <el-checkbox v-model="scope.row.permissions.ckckjl"> 仓库>出库记录 </el-checkbox> -->
                  <el-checkbox v-model="scope.row.permissions.ckqtck"> 仓库>其他出库 </el-checkbox>
                   <!--<el-checkbox v-model="scope.row.permissions.bb"> 报表>报表中心 </el-checkbox> -->
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="150px">
                <template slot-scope="scope">
                  <el-checkbox @change="handelCheckAll($event,scope.row)">全选</el-checkbox>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import RequestObject from '@/utils/requestObject'
import request from '@/utils/request'
import { MessageBox } from 'element-ui'
import DateUtil from '@/utils/dateUtil'
import height from '@/utils/height'
import AppTree from '@/utils/appTree'
import { constants } from 'crypto'
import { getBtnCtr } from '@/utils/BtnControl'

export default {
  name: "AppPermissions",
  data () {
    return {
      btnPermission: '',
      headerHeight: '50px',
      mainHeight: 0,
      outTableData: [
      ],
      inTableData: [{
        permissions: {
          sckgbd: false,
          scwgbd: false,
          sctgbd: false,
          scycbd: false,
          scjsjd: false,
          sccgjd: false,
          ckrkjl: false,
          ckqtrk: false,
          ckckjl: false,
          ckqtck: false,
          bb: false
        }
      }],
      treeStyle: '',
      tableHeight: '500px',
      roleList: {},
      roleId: -1,
    }
  },
  created () {
    // 动态头部按钮
    this.btnPermission = getBtnCtr(
      this.$route.path,
      this.$store.getters.userPermission
    )
    // // 设置当前页面样式
    this.setStyle()

    // // 初始化所有模板信息
    this.InitRoles()
  },
  mounted () { },
  methods: {
    setStyle () {
      // 设置样式
      this.mainHeight = height - 116 - parseInt(this.headerHeight)
      this.treeStyle =
        'width:236px;height:' +
        (this.mainHeight - 4).toString() +
        'px;padding:0px;'
      this.treeDivStyle =
        'width:240px;height:' +
        this.mainHeight.toString() +
        'px;padding:2px;background:drgb(230,235,245);'
    },
    InitRoles () {
      var reqObject = RequestObject.CreateGetObject()
      request({
        url: '/api/TRoles',
        method: 'get',
        params: {
          requestObject: JSON.stringify(reqObject)
        }
      }).then(res => {
        if (res.code == -1) {
          this.$confirm(res.info, '错误信息', {
            confirmButtonText: '确定',
            type: 'error',
            showCancelButton: false
          })
        } else {
          this.outTableData = res.data
        }
      })
    },
    handelSave () {
      if (this.roleId < 0) {
        this.$message({ type: 'error', message: '请选择需要设置权限的角色' });
        return
      }
      var postData = RequestObject.CreatePostObject({
        id: 0,
        rid: this.roleId,
        sckgbd: this.inTableData[0].permissions.sckgbd,
        scwgbd: this.inTableData[0].permissions.scwgbd,
        sctgbd: this.inTableData[0].permissions.sctgbd,
        scycbd: this.inTableData[0].permissions.scycbd,
        scjsjd: this.inTableData[0].permissions.scjsjd,
        sccgjd: this.inTableData[0].permissions.sccgjd,
        ckrkjl: this.inTableData[0].permissions.ckrkjl,
        ckqtrk: this.inTableData[0].permissions.ckqtrk,
        ckckjl: this.inTableData[0].permissions.ckckjl,
        ckqtck: this.inTableData[0].permissions.ckqtck,
        bb: this.inTableData[0].permissions.bb,
      }, null)

      request({
        url: '/api/Tpmapppermissions',
        method: 'post',
        data: postData
      }).then(res => {
        if (res.code === 0) {
          this.$message({ type: 'success', message: 'APP权限设置成功' });
        } else {
          this.$message({ type: 'error', message: 'APP权限设置失败' });
        }
      }).catch(err => {
        this.$message({ type: 'success', message: err });
      })
    },
    handelOutTableRowClick (row) {
      this.roleId = row.id;
      request({
        url: '/api/Tpmapppermissions/GetByRoleId',
        method: 'get',
        params: {
          roleId: this.roleId
        }
      }).then(res => {
        if (res.code === 0) {
          this.inTableData[0].permissions.sckgbd = res.data.sckgbd;
          this.inTableData[0].permissions.scwgbd = res.data.scwgbd;
          this.inTableData[0].permissions.sctgbd = res.data.sctgbd;
          this.inTableData[0].permissions.scycbd = res.data.scycbd;
          this.inTableData[0].permissions.scjsjd = res.data.scjsjd;
          this.inTableData[0].permissions.sccgjd = res.data.sccgjd;
          this.inTableData[0].permissions.ckrkjl = res.data.ckrkjl;
          this.inTableData[0].permissions.ckqtrk = res.data.ckqtrk;
          this.inTableData[0].permissions.ckckjl = res.data.ckckjl;
          this.inTableData[0].permissions.ckqtck = res.data.ckqtck;
          this.inTableData[0].permissions.bb = res.data.bb;
        } else {
          this.$message({ type: 'error', message: res.info })
        }
      })
    },
    handelDelete () {
      if (this.roleId < 0) {
        this.$message({ type: 'error', message: '请选择需要删除权限的角色' });
        return
      }
      var postData = RequestObject.CreatePostObject({
        id: this.roleId,
        deleteRemark: ''
      }, null)

      request({
        url: '/api/Tpmapppermissions',
        method: 'delete',
        data: postData
      }).then(res => {
        if (res.code === 0) {
          this.$message({ type: 'success', message: 'APP权限删除成功' });
          this.inTableData[0].permissions.sckgbd = false;
          this.inTableData[0].permissions.scwgbd = false;
          this.inTableData[0].permissions.sctgbd = false;
          this.inTableData[0].permissions.scycbd = false;
          this.inTableData[0].permissions.scjsjd = false;
          this.inTableData[0].permissions.sccgjd = false;
          this.inTableData[0].permissions.ckrkjl = false;
          this.inTableData[0].permissions.ckqtrk = false;
          this.inTableData[0].permissions.ckckjl = false;
          this.inTableData[0].permissions.ckqtck = false;
          this.inTableData[0].permissions.bb = false;
        } else {
          this.$message({ type: 'error', message: 'APP权限删除失败' });
        }
      }).catch(err => {
        this.$message({ type: 'success', message: err });
      })
    },
    handelCheckAll (e, row) {
      row.permissions.sckgbd = e;
      row.permissions.scwgbd = e;
      row.permissions.sctgbd = e;
      row.permissions.scycbd = e;
      row.permissions.scjsjd = e;
      row.permissions.sccgjd = e;
      row.permissions.ckrkjl = e;
      row.permissions.ckqtrk = e;
      row.permissions.ckckjl = e;
      row.permissions.ckqtck = e;
      row.permissions.bb = e;
    }
  }
}
</script>

<style lang="scss" scoped>
#platformPermissions /deep/ {
  .asideTable {
    background: #fff;
    border: 1px solid #dfe6ec;
  }
  .roleTable {
    font-size: 12px;
    padding: 4px 10px 3px;
    border-bottom: 1px solid #dfe6ec;
    cursor: pointer;
  }
  .active {
    background: #f5f7fa;
  }
  .roleList:hover {
    background: #f5f7fa;
  }
  .el-table .cell {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .badgeItem {
    display: inline-block;
  }
  .roleHeader {
    background: #f5f7fa;
    border-bottom: 2px solid #dfe6ec;
    text-align: center;
  }
  aside {
    background: #fff;
  }
}
</style>
